<template>
  <div style="margin-top:30px">
    <el-form ref="form" :rules="rules" :model="form" label-width="130px">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="装货地址" prop="shipperSubdivisionCodeList" style="margin-right:15px">
              <!-- 装货地址 -->
              <el-cascader
                v-model="form.shipperSubdivisionCodeList"
                :options="areaOptions"
                :props="{ value: 'countyCode', label: 'countyName' }"
                clearable
                @change="changeConsignorAreaList"
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="装货详细地址" prop="consignorDetailAddress" style="margin-right:15px">
              <el-input v-model="form.consignorDetailAddress" placeholder="请输入装货详细地址" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="收货地址" prop="consigneeSubdivisionCodeList" style="margin-right:15px">
              <!-- 收货地址 -->
              <el-cascader
                v-model="form.consigneeSubdivisionCodeList"
                :options="areaOptions"
                :props="{ value: 'countyCode', label: 'countyName' }"
                clearable
                @change="changeConsigneeAreaList"
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="收货详细地址" prop="consigneeDetailAddress" style="margin-right:15px">
              <el-input v-model="form.consigneeDetailAddress" placeholder="请输入收货详细地址" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="funcCancel">取 消</el-button>
      <el-button type="primary" @click="funcSubmit">确 定</el-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
Vue.use(VXETable)
import { addCommonRouteInfo } from '@/api/shipment'
export default {
  name: 'DriverCommonRouteInfoAdd',
  props: {
    areaOptions: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      form: {
        userCode: '',
        shipperSubdivisionCodeList: null,
        consignorProvinceCode: '',
        consignorCityCode: '',
        consignorCountyCode: '',
        consignorDetailAddress: '',
        consigneeSubdivisionCodeList: null,
        consigneeProvinceCode: '',
        consigneeCityCode: '',
        consigneeCountyCode: '',
        consigneeDetailAddress: '',
        distance: 0
      },
      rules: {
        shipperSubdivisionCodeList: [
          { required: true, message: '请选择装货地址', trigger: 'change' }
        ],
        consigneeSubdivisionCodeList: [
          { required: true, message: '请选择收货地址', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.form.userCode = this.$route.query.partyCode
  },
  methods: {
    funcSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          const rLoading = this.openLoading();
          addCommonRouteInfo(this.form)
            .then(response => {
              rLoading.close();
              this.$message({ message: response.msg, type: 'success' })
              this.$emit('fatherAddMethod')
            })
            .then(() => this.$refs['form'].resetFields())
        } else {
          return false
        }
      })
    },
    // 取消
    funcCancel() {
      this.$emit('fatherCancelMethod', 'add')
    },
    changeConsigneeAreaList() {
      this.form.consigneeProvinceCode = this.form.consigneeSubdivisionCodeList[0]
      this.form.consigneeCityCode = this.form.consigneeSubdivisionCodeList[1]
      this.form.consigneeCountyCode = this.form.consigneeSubdivisionCodeList[2]
    },
    changeConsignorAreaList() {
      this.form.consignorProvinceCode = this.form.shipperSubdivisionCodeList[0]
      this.form.consignorCityCode = this.form.shipperSubdivisionCodeList[1]
      this.form.consignorCountyCode = this.form.shipperSubdivisionCodeList[2]
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog-footer {
  margin: 15px 0 15px 0;
  width: 175px;
  float: right;
}
.el-cascader {
  width: 100%;
}
</style>
